const breadcrumb = document.querySelector('.breadcrumb')
const tags = document.querySelector('.tags')
const hits = document.querySelector('.hits')
const briefText = document.querySelector('.brief_text')
const summary1 = document.querySelector('.summary1')
const summary2 = document.querySelector('.summary2')
const newchapter = document.querySelector('.newchapter')
const fansPay = document.querySelector('.fans_scrolling_wrapper')
const payList = document.querySelector('.fans_scrolling_wrapper')
const medal = document.querySelector('.author .medal')
const data = document.querySelector('.author .data')
const bookLists = document.querySelector('.booklists')
const beforeBtn = document.querySelector('.before-btn')
const afterBtn = document.querySelector('.after-btn')
const fansrank = document.querySelector('.fansrank .contents')
const pic = document.querySelector('.intro .pic')
const catalog = document.querySelector('.catalog')
const things = document.querySelector('.things')
const title = document.getElementById('title')
console.log()
fetch(`https://app2.motie.com/pc/book/${window.location.search.split("=")[1]}/label`)
    .then(res => res.json())
    .then(res1 => {
        console.log(res1)
        breadcrumb.innerHTML = `
        <a href="">首页</a>
        <span>></span>
        <a href="">${res1.data.categoryVO.name}</a>
        <span>></span>
        <a href="">${res1.data.bookName}</a>
    `
    }).catch(err => {
        console.log(err)
    })
fetch(`https://app2.motie.com/pc/book/${window.location.search.split("=")[1]}/detail`)
    .then(res => res.json())
    .then(res1 => {
        title.innerHTML = `
        <p class="name">
            ${res1.data.bookName}
        </p>
        <p class="author">
            ${res1.data.authorName}
        </p>
        <p class="write">
            著
        </p>
    `
        pic.innerHTML = `
        <img src="${res1.data.bookPic}" alt="">
    `
        const tagsArr = res1.data.tags.split(" ").slice(0, 3)
        tags.innerHTML = `
        ${res1.data.finish ? '<a href="" class="isfinish">完结</a>' : '<a href="" class="isfinish">连载</a>'}
        ${res1.data.sign ? '<a href="" class="isfinish">签约</a>' : ''}
        ${res1.data.free ? '' : '<a href="" class="isfinish">VIP</a>'}
    `
        tagsArr.forEach(element => {
            tags.innerHTML += `
            <a href="">${element}</a>
        `
        });
        hits.innerHTML = `
        <i></i>
        <span>${res1.data.words}字</span>
        <i></i>
        <span>总点击 ${res1.data.clickNum}</span>
        <i></i>
        <span>推荐票 ${res1.data.recommendName}</span>
    `
        const textArr = res1.data.content.split('\r\n')
        const newText = []
        textArr.forEach(element => {
            if (element != '') {
                newText.push(element)
            }
        })
        let text = newText.join('')
        briefText.innerHTML = `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${text}`
    }).catch(err => {
        console.log(err)
    })
fetch(`https://app2.motie.com/pc/book/${window.location.search.split("=")[1]}/intro`)
    .then(res => res.json())
    .then(res1 => {
        summary1.innerHTML = `
        ${res1.data.content}
    `
        summary2.innerHTML = `
        <span>${res1.data.authorName}说:</span>
        ${res1.data.authorSay}
    `
        const time = new Date(res1.data.lastChapterTime).toLocaleString()
        newchapter.innerHTML = `
        <div class="newtitle">
            <span>最新章节:
            <img src="./img/VIP.gif" alt="">
            ${res1.data.lastChapterName}</span>
            <span>更新时间:${time}</span>
        </div>
        <p>${res1.data.lastChapterContent}</p>
    `
    }).catch(err => {
        console.log(err)
    })
fetch(`https://app2.motie.com/pc/book/${window.location.search.split("=")[1]}/donate`)
    .then(res => res.json())
    .then(res1 => {
        let pay = ''
        res1.data.list.forEach(item => {
            let payTime = new Date(item.createTime).toLocaleString()
            pay += `
            <p>
                <span class="reader">
                    <i>${item.userName}</i>
                    打赏了
                    <i>${item.count}磨铁币</i>
                </span>
                <span class="paytime">
                    ${payTime}
                </span>
            </p>
        `
        })
        fansPay.innerHTML = `
        <div>${pay}</div>
        <div>${pay}</div>
    `
    }).catch(err => {
        console.log(err)
    })
fetch(`https://app2.motie.com/pc/book/${window.location.search.split("=")[1]}/author`)
    .then(res => res.json())
    .then(res1 => {
        medal.innerHTML = `
        <img src="${res1.data.authorPic}" alt="">
        <div class="name">
            <p>${res1.data.authorName}</p>
            ${res1.data.sign ? '<span>签约作家</span>' : ''}
        </div>
    `
        data.innerHTML = `
        <div>
            <p>作品总数</p>
            <span>${res1.data.bookNum}</span>
        </div>
        <div>
            <p>累计字数</p>
            <span>${res1.data.words}</span>
        </div>
        <div>
            <p>驻站天数</p>
            <span>${res1.data.dayCount}</span>
        </div>
    `
        const bookPage = Math.ceil(res1.data.bookNum / 2) - 1
        for (let i = 0; i <= bookPage; i++) {
            bookLists.innerHTML += `
            <div class="booklist">
                <div class="book">
                    <img src="${res1.data.books[i * 2].bookPic}" alt="">
                    <span>${res1.data.books[i * 2].bookName}</span>
                </div>
                ${(2 * i + 2) <= res1.data.bookNum ? `<div class="book"><img src="${res1.data.books[i * 2 + 1].bookPic}" alt=""><span>${res1.data.books[i * 2 + 1].bookName}</span></div>` : ''}
            </div>
        `
        }
        let placeNum = 0
        function btn() {
            if (placeNum < bookPage * 240) {
                afterBtn.style.backgroundColor = '#0fb295'
            } else {
                afterBtn.style.backgroundColor = '#ccc'
            }
            if (placeNum > 0) {
                beforeBtn.style.backgroundColor = '#0fb295'
            } else {
                beforeBtn.style.backgroundColor = '#ccc'
            }
        }
        btn()
        afterBtn.onclick = () => {
            if (placeNum >= bookPage * 240) {
                placeNum = placeNum
            } else {
                placeNum += 240
            }
            btn()
            bookLists.style.transform = `translateX(-${placeNum}px)`
        }
        beforeBtn.onclick = () => {
            if (placeNum > 0) {
                placeNum -= 240
            }
            btn()
            bookLists.style.transform = `translateX(-${placeNum}px)`
        }
    }).catch(err => {
        console.log(err)
    })
fetch(`https://app2.motie.com/pc/book/${window.location.search.split("=")[1]}/follow?pageNo=1&pageSize=10`)
    .then(res => res.json())
    .then(res1 => {

        fansrank.innerHTML += `
        <div class="content">
            <div class="left">
                <div class="num">1</div>
                <div class="fansintro">
                    <p>${res1.data.items[0].userName}</p>
                    <span>粉丝级别:${res1.data.items[0].userLevel}</span>
                </div>
            </div>
            <div class="right">
                <img src="${res1.data.items[0].userPic}" alt="">
            </div>
        </div>
    `
        const fansArr = res1.data.items.slice(1, 9)
        fansArr.forEach((item, index) => {
            fansrank.innerHTML += `
            <div class="content">
                <div class="left">
                    <div class="num">${index + 2}</div>
                    <div class="fansintro">
                        <p>${item.userName}</p>
                    </div>
                </div>
                <div class="right">
                    <span>${item.userLevel}</span>
                </div>
            </div>
        `
        })
    }).catch(err => {
        console.log(err)
    })
function tab(i) {
    let tabs = document.querySelectorAll('.tab')
    tabs.forEach(item => {
        item.classList.remove('on')
    })
    i.classList.add('on')
    if (tabs[0].classList.contains('on')) {
        things.style.display = 'flex'
        catalog.style.display = 'none'
    } else if (tabs[1].classList.contains('on')) {
        things.style.display = 'none'
        catalog.style.display = 'flex'
    }
}
fetch(`https://app2.motie.com/pc/book/${window.location.search.split("=")[1]}/catalog`)
    .then(res => res.json())
    .then(res1 => {
        let catalogTxt = ''
        res1.data.data.forEach(item => {
            catalogTxt += `
                ${item.volume ? `<div class="catalog-title">${item.name}</div>` : `<div class="catalog-content"><div class="catalog-name">${item.name}</div>${item.free ? '' : `<img src="./img/VIP.gif" alt="">`}<div class="catalog-time">${item.publishTime}</div></div>`}
            `
        })
        catalog.innerHTML = catalogTxt
    }).catch(err => {
        console.log(err)
    })